<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>购物车2</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/t-goshoping.css" />
		<link rel="stylesheet" type="text/css" href="../css/foot.css" />
		<link rel="stylesheet" type="text/css" href="../css/nava.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/angular-route.min.js"></script>
		
		<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
		<script type="text/javascript" src="../js/adress.js"></script>
	</head>

	<body ng-app="myApp">
		<div ng-include="'nava.html'"></div>
		<div class="logo-shoping clearfix">
			<ul>
				<li>
					<img src="../img/t-logo.png" />
				</li>
				<li>
					<span class="go-span2">我的购物车</span>
					<img src="../img/t-rightguide.png" alt="" />
					<span class="go-span1" style="">确认订单消息</span>
					<img src="../img/t-rightguide.png" alt="" />
					<span class="go-span3">订单提交成功</span>
				</li>
			</ul>
		</div>

		<div class="t-surebuy" ng-crotraller='mysureCtrl'>
			<div class="addAddress clearfix">
				<span>收货人信息</span>
				<span class="newaddress">使用新地址</span>
			</div>
			<ul class="t-address clearfix" ng-controller='addCtrl' ;>
				<li ng-repeat='item in data'>
					<div class="t-left">
						<span><img src="../img/t-sure.png" alt="" class="t-imgs" /></span>
						<span>{{item.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.area}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.detail}}</span>
						<span>默认地址</span>
					</div>
					<div class="t-right">
						<span class="t-clickmo">设置为默认地址</span>
						<span class="t-clickgai">修改</span>
						<span class="t-clickdel" ng-click="delfun($index)">删除</span>
					</div>
				</li>
			</ul>
			<!--展开-->
			<div class="t-zhan">
				<span class="t-open">展开其他地址  <img src="../img/t-todown.png" alt="" /></span>
				<span class="t-close">关闭其他地址  <img src="../img/t-totop.png" alt="" /></span>
			</div>
			<!--商品信息-->
			<div class="buyNews">商品信息</div>
			<div class="listHead">
				<span>爱果果水果店</span>
				<span>规格</span>
				<span>单价</span>
				<span>数量</span>
				<span>金额</span>
			</div>
			<ul class="t-list1">
				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>

				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>
				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>
			</ul>
			<div class="t-allNum">
				<ul>
					<li>运费</li>
					<li>¥ 5.0</li>
					<li>商品金额</li>
					<li>¥ 1707.0</li>
					<li>商家合计</li>
					<li>¥ 1712.0</li>
				</ul>
			</div>
			<div class="t-bill1">
				<div>
					<h2>开票信息</h2>
					<label><input type="radio" name="r" value="">不需要</label>
					<label><input type="radio" name="r" value="">个人</label>
					<label><input type="radio" name="r" value="">单位</label>
				</div>
				<div>
					<span>发票抬头：</span>
					<input type="text" />&nbsp;&nbsp;*
					<span>请填写后认真核对发票信息</span>
				</div>
				<div>
					<h2>添加订单备注</h2>
					<input type="text" name="" value="" placeholder="限制45个字，请填写有关商品、支付、发票等信息。" />
				</div>
			</div>
			<div class="listHead">
				<span>爱果果水果店</span>
				<span>规格</span>
				<span>单价</span>
				<span>数量</span>
				<span>金额</span>
			</div>
			<ul class="t-list1">
				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>

				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>
				<li>
					<img src="../img/t-strawberry.png" alt="" />
					<p>云南蒙自石榴8个装</p>
					<p>8个装</p>
					<p>¥569</p>
					<div>
						<img src="../img/t-subtract.png" alt="" />
						<span class="buyNum">1</span>
						<img src="../img/t-add.png" alt="" />
					</div>
					<p>¥569</p>
				</li>
			</ul>
			<div class="t-allNum">
				<ul>
					<li>运费</li>
					<li>¥ 5.0</li>
					<li>商品金额</li>
					<li>¥ 1707.0</li>
					<li>商家合计</li>
					<li>¥ 1712.0</li>
				</ul>
			</div>
			<div class="t-bill2">
				<div>
					<h2>开票信息</h2>
					<label><input type="radio" name="r" value="">不需要</label>
					<label><input type="radio" name="r" value="">个人</label>
					<label><input type="radio" name="r" value="">单位</label>
				</div>
				<div>
					<span>发票抬头：</span>
					<input type="text" />&nbsp;&nbsp;*
					<span>请填写后认真核对发票信息</span>
				</div>
				<div>
					<h2>添加订单备注</h2>
					<input type="text" name="" value="" placeholder="限制45个字，请填写有关商品、支付、发票等信息。" />
				</div>
				<div>
					<p>次日达·礼拜五</p>
					<div class="clearfix">
						<span>选择送达时间：</span>
						<span>2016年9月18日</span>
						<span class="t-clock">12:00~3:00</span>
						<img src="../img/t-calendar.png" alt="" />
						<span class="clickXiu">点击修改</span>

					</div>
					<div class="bg-alter">
						<ul class="clearfix clickul">
							<li>10:00~13:00</li>
							<li>11:00~14:00</li>
							<li>12:00~15:00</li>
							<li>13:00~16:00</li>
							<li>14:00~17:00</li>
							<li>15:00~18:00</li>
							<li>16:00~19:00</li>
							<li>17:00~20:00</li>
							<li>18:00~21:00</li>
							<li>19:00~22:00</li>
						</ul>
						<div class="clearfix"><span class="t-cancle">取消</span><span class="t-sure">确定</span></div>
					</div>

				</div>
			</div>
			<div class="t-allPlay">
				<ul>
					<li class="clearfix">
						<span>¥3424</span>
						<span>实付金额：</span>

					</li>
					<li class="clearfix">
						<span>300积分</span>
						<span>订单完成后可获得积分：</span>
					</li>

					<li class="clearfix">
						<span class="senmenu">提交订单</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="t-meng">
		</div>
		<div class="t-win">
			<div>温馨提示</div>
			<div class="clearfix">
				<img src="../img/t-notice.png" alt="" />
				<h2>新疆哈密瓜（8kg装）、葡萄（150g）</h2>
				<p>无法配送到指定区域、请到购物车中删除</p>
				<p>或修改配送地址后重新提交订单</p>
			</div>
			<div>
				<span>返回购物车修改</span>
				<span>修改配送区域</span>
			</div>
		</div>
		<div class="t-win1">
			<h1>使用平台支付</h1>
			<p>请您在新打开的网上银行页面进行支付，完成支付前请不要关闭该窗口</p>
			<div>
				<div>
					<p>已经完成支付</p>
					<p>查看订单详情</p>
				</div>
				<div>
					<p>支付失败</p>
					<p>更换支付方式</p>
				</div>
			</div>
		</div>
		<div class="address">
			<div class="add" ng-controller="addareactrl">
				<div>
					<p>添加新地址</p>
				</div>
				<ul>
					<li class="clearfix">
						<span class="l">*</span><span class="l">收货人姓名:</span>
						<div class=" l"><input class="firstname" type="text"></div>
					</li>
					<li class="clearfix">
						<span class="l">*</span>
						<span class="l">所在地区:</span>
						<div class="area1 l">
							<div class="privincehead">请选择</div>
							<ul class="privince"></ul>
							<img src="../img/downtrigle.png" alt="">
						</div>
						<div class="area2 l">
							<div class="cityhead">请选择</div>
							<ul class="city"></ul>
							<img src="../img/downtrigle.png" alt="">
						</div>
						<div class="area3 l">
							<div class="countryhead">请选择</div>
							<ul class="country"></ul>
							<img src="../img/downtrigle.png" alt="">
						</div>
					</li>
					<li class="clearfix">
						<span class="l">*</span><span class="l">详细地址:</span>
						<div class="l"><input class="add_a" type="text"></div>
					</li>
					<li class="clearfix">
						<span class="l">*</span><span class="l">联系电话:</span>
						<div class="l"><input class="add_ph" type="text"></div><span class="l">或固定电话:</span>
						<div class="l"><input class="fix_first" type="text"></div><span class="l">-</span>
						<div class="l"><input class="fix_last" type="text"></div>
					</li>
				</ul>
				<span></span><span>设置为常用地址</span>
				<div class="save">保存</div>
			</div>

		</div>
		<div ng-include="'foot.html'"></div>
	</body>

	<script type="text/javascript">
		var dd = 0;
		var app = angular.module('myApp', ['ngRoute']);
		var bubu = false;
		app.controller('navctrl', function($scope) {
			$('.pleaselogin').html(localStorage.getItem("name"));
			$('.t-tui').html('退出');
			//我的订单
			$('.ding1').click(function(){
					window.location='personalcenter.html#/buy';
				
			});
			//我的消息
			$('.ding2').click(function(){
					window.location='personalcenter.html#/msg';
				
			});	
			//我的商家
			$('.ding3').click(function(){
					window.location='personalcenter.html#/store';
			
			});
			$('.t-tui').click(function() {
				if(bubu) {
					$('.pleaselogin').html('');
					$(this).html('请登录');
					bubu = false;

				} else {
					$(this).html('退出');
					window.location = 't-loadimg.html';
					localStorage.clear()
					bubu = true;
				}
			})
		});

		app.controller('addCtrl', function($scope, $http) {
			$http.get('../php/address.php').success(function(data) {

				$scope.data = data;
				length = data.length

			})
			$scope.delfun = function(index) {
				$scope.data.splice(index, 1);

				length--;
				dd = length * 37;
				$('.t-address').animate({
					height: dd + 'px'
				}, 500);
			}
		})

		$('.t-open').click(function() {
			var le = length * 37;
			dd = le;
			$('.t-address').animate({
				height: le + 'px'
			}, 500);
			$(this).hide();
			$('.t-close').show();

		});
		$('.t-close').click(function() {
			$('.t-address').animate({
				height: 70 + 'px'
			}, 500);
			$(this).hide();
			$('.t-open').show();
		})
		$('.clickXiu').click(function() {
			$('.bg-alter').show();
			$('.bg-alter').animate({
				height: "165px"
			}, 500)
		})
		$('.clickul li').hover(function() {
			$(this).css({
				backgroundColor: '#f08200'
			})
		}, function() {
			$(this).css({
				backgroundColor: '#fff'
			})
		})
		$('.clickul li').click(function() {
			$('.t-clock').html($(this).text())
			$('.bg-alter').animate({
				height: "0"
			}, 500)
		});
		
		
		
		
		
//		$()
		var na,p,c,co;
    var arr=[];
    var arr1 = [];
    $('.firstname').bind('input propertychange', function() {
        na = $(this).val();

    });
    $(".privincehead").bind('DOMNodeInserted', function(e) {
        var p = $(e.target).html();
        arr.push(p);
    });
    $(".cityhead").bind('DOMNodeInserted', function(e) {
        var c = $(e.target).html();
        arr.push(c);
    });
    $(".countryhead").bind('DOMNodeInserted', function(e) {
        var co = $(e.target).html();
        arr.push(co);
    });
    $('.add_a').bind('input propertychange', function() {
        adda = $(this).val();

    });
    $('.add_ph').bind('input propertychange', function() {
        addph = $(this).val();

    });

    $('.save').click(function(){
        var fixph = $('.fix_first').val();
        var fixone = $('.fix_last').val();
        arr1.push(fixph);
        arr1.push(fixone);
        
        var pc = arr.join('');
        var fixphone = arr1.join('-');
        
        if($('.firstname').val()==''){
        	   alert('请输入姓名')
        }else if($('.privincehead').html()=='请选择'||$('.cityhead').html()=='请选择'||$('.countryhead').html()=='请选择') {
        		alert('请选择地区')
        } else if ($('.add_a').val()==''){
        		alert('请输入详细地址')
        }else if(!(/^1(3|4|5|7|8)\d{9}$/.test($('.add_ph').val()) || /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(fixphone))){
                alert('请输入正确的手机号或者固定电话');
        }else{
	        	var obj = {};
	        obj.name = na;
	        obj.area = pc;
	        obj.detail = adda;
	        obj.phone = addph;
	        obj.fixphone = fixphone;
			$.post('../php/area.php',obj,function(data){
              if(data=='插入成功'){
                 alert('插入成功');
                 $('.firstname').val('');
                 $('.add_a').val('');
                 $('.add_ph').val('');
                 $('.privincehead').html('请选择');
                 $('.cityhead').html('请选择');
                 $('.countryhead').html('请选择');
                 $('.t-meng').hide()
              	$('.address').hide();
                 fixphone='';
              }else{
                  alert('请输入正确的手机号或者密码')
              }
          })
        }
          
          

    });
    
    
     app.controller('addareactrl',function($scope){
            var index;
            $('.privincehead').click(function  () {
                //清空li
                $('.privince>li').remove();

                //循环添加
                for (var i=0;i < provinceList.length;i++) {
                    $('.privince').append('<li>'+provinceList[i].name+'</li>');
                };


                $('.privince>li').click(function  () {
                    index = $(this).index();
                    $('.privince').toggle("slow");
                    $('.city').text('');
                    $('.country').text('');
                    $('.privincehead').text($(this).text());
                    $('.city>li').remove();
                    for (var j=0;j < provinceList[index].cityList.length;j++) {
                        $('.city').append('<li>'+provinceList[index].cityList[j].name+'</li>');
                    }

                    $('.city>li').click(function  () {
                        $('.city').toggle("slow");
                        $('.country').text('');
                        $('.country>li').remove();
                        $('.cityhead').text($(this).text());
                        for (var k =0;k<provinceList[index].cityList[$(this).index()].areaList.length;k++) {
                            $('.country').append('<li>'+provinceList[index].cityList[$(this).index()].areaList[k]+'</li>')
                        }
                        $('.country>li').click(function  () {

                            $('.country').toggle("slow");
                            $('.countryhead').text($(this).text());
                        })
                    })
                })
            })
            $('.privincehead').click(function  () {
                $('.privince').toggle("slow");
            });
            $('.cityhead').click(function  () {
                $('.city').toggle("slow");
            });
            $('.countryhead').click(function  () {
                $('.country').toggle("slow");

            });
            $('.country>li').click(function  () {
                $('.countryhead').text('');
                $('.countryhead').text($(this).text());
                $('.country').toggle("slow")	;
            })


        });
        $('.newaddress').click(function(){
        		$('.t-meng').show()
             $('.address').show();
        });
       $('.t-meng').click(function(){
       		 $('.t-meng').hide()
              $('.address').hide();
       });
       
       $('.senmenu').click(function(){
       		window.location='t-shoping3.html'
       })
	</script>

</html>